<template>
  <div id="dialogEdit">
    <el-dialog
      class="about-set"
      :title="isAdd ? '创建频道栏目' : '编辑频道栏目'"
      :visible.sync="dialogAddData.isShow"
      width="500px"
      :before-close="labelHandleClose"
    >
      <div class="form-box">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="频道栏目名称" prop="name">
            <el-input
              :disabled="isDisabled"
              v-model.trim="ruleForm.name"
              placeholder="请输入频道栏目名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="使用状态" prop="status">
            <template>
              <el-select v-model="ruleForm.status" placeholder="">
                <el-option
                  v-for="item in usageStatusList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="排序" prop="sortNum">
            <el-input v-model.trim="ruleForm.sortNum" placeholder=""></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="cancelLabel">取 消</el-button>
        <el-button
          type="success"
          :loading="loading"
          @click="confirmLabel('ruleForm')"
          >确认</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  putAddSetting,
  putEditSetting,
  getEditSetting
} from '@/api/appSetting/contentTag' // 接口
import { validateSpecial } from '@utils/validate'
export default {
  name: 'DialogAddEdit',
  msg: '频道设置-新增弹窗',
  props: ['dialogAddData'],
  data() {
    var valiAppName = (rule, value, callback) => {
      var length_ = value.length
      if (length_ > 5 || length_ < 2) {
        callback(new Error('请输入2-5个字符'))
      }
      if (!validateSpecial(value)) {
        callback(new Error('不能使用特殊字符'))
      } else {
        callback()
      }
    }

    return {
      loading: false,
      isAdd: true, // 新增-true,编辑-false
      isDisabled: false,
      ruleForm: {
        name: '', // 标签分类名
        status: false,
        sortNum: ''
      },
      rules: {
        name: [
          { required: true, message: '频道名不能为空' },
          { validator: valiAppName, trigger: 'blur' }
        ]
      },
      usageStatusList: [
        { dictLabel: '启用', dictValue: true },
        { dictLabel: '停用', dictValue: false }
      ]
    }
  },
  mounted() {
    this.isAdd = this.dialogAddData.type === 'add'
    if (!this.isAdd) {
      // 编辑
      this.id = this.dialogAddData.id
      this.isDisabled = true
      this.getFormData()
    }
  },
  methods: {
    /* 编辑时获取表单详情 */
    getFormData() {
      getEditSetting(this.id, (response) => {
        this.ruleForm = { ...response }
      })
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.dialogAddData.params = null
      this.dialogAddData.isShow = false
    },
    /* 确认提交 */
    confirmLabel(formName) {
      let _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          _this.subForm()
        } else {
          return false
        }
      })
    },
    /* 提交表单 */
    subForm() {
      this.loading = false
      let obj = { ...this.ruleForm }
      if (this.isAdd) {
        putAddSetting(
          obj,
          (response) => {
            this.loading = false
            this.$emit('refresh')
            this.cancelLabel()
          },
          (response) => {
            this.loading = false
            this.$message({
              message: response.message,
              type: 'warning'
            })
          }
        )
      } else {
        let obj = {
          channelName: this.ruleForm.name,
          status: this.ruleForm.status,
          sortNum: this.ruleForm.sortNum
        }
        putEditSetting(
          this.id,
          obj,
          (response) => {
            this.loading = false
            this.$emit('refresh')
            this.cancelLabel()
          },
          (response) => {
            this.loading = false
            this.$message({
              message: response.message,
              type: 'warning'
            })
          }
        )
      }
    }
  }
}
</script>

<style lang="less">
// #dialogAddEdit {
// }
</style>
